import tracker from '../utils/tracker';
import onload from '../utils/onload';
import getLastEvent from '../utils/getLastEvent';
import getSelector from '../utils/getSelector';
export function timing() {
    let FMP, LCP;
    // 增加一个性能条目的观察者
    if (PerformanceObserver) {
        /**
         * 注意：要想获取到FMP和LCP的时间，
         *      需要给有意义的元素添加elementtiming和meaningful的属性
         * 例如：h1.setAttribute('elementtiming', 'meaningful'); 
         */
        new PerformanceObserver((entryList, observer) => {
            let perfEntries = entryList.getEntries();
            FMP = perfEntries[0]; //startTime 2000以后
            observer.disconnect(); //不再观察了
        }).observe({ entryTypes: ['element'] }); //观察页面中的意义的元素

        new PerformanceObserver((entryList, observer) => {
            let perfEntries = entryList.getEntries();
            LCP = perfEntries[0];
            observer.disconnect(); //不再观察了
        }).observe({ entryTypes: ['largest-contentful-paint'] }); //观察页面中的意义的元素

        new PerformanceObserver((entryList, observer) => {
            let lastEvent = getLastEvent();
            let firstInput = entryList.getEntries()[0];
            console.log('FID', firstInput);
            if (firstInput) {
                //processingStart开始处理的时间 startTime开点击的时间 差值就是处理的延迟
                let inputDelay = firstInput.processingStart - firstInput.startTime;
                let duration = firstInput.duration; //处理的耗时
                if (inputDelay > 0 || duration > 0) {
                    tracker.send({
                        kind: 'experience', //用户体验指标
                        type: 'firstInputDelay', //首次输入延迟
                        inputDelay, //延时的时间
                        duration, //处理的时间
                        startTime: firstInput.startTime,
                        selector: lastEvent ? getSelector(lastEvent.path || lastEvent.target) : ''
                    });
                }

            }
            observer.disconnect(); //不再观察了
        }).observe({ type: 'first-input', buffered: true }); //FID：用户首次和页面交互，页面返回响应的时间
    }

    //用户的第一次交互 点击页面 
    onload(function() {
        setTimeout(() => {
            const {
                fetchStart, //请求开始时间
                connectStart, //TCP连接开始时间
                connectEnd, //TCP连接结束时间
                requestStart, //http请求开始时间
                responseStart, //http响应开始时间
                responseEnd, //http响应结束时间
                domLoading, //开始解析dom的时间
                domInteractive, //dom结构结束解析的时间
                domContentLoadedEventStart, //DOMContentLoded 事件开始的时间
                domContentLoadedEventEnd, //DOMContentLoded 事件结束的时间
                loadEventStart // 开始loading回调函数
            } = performance.timing;
            tracker.send({
                kind: 'experience', //用户体验指标
                type: 'timing', //统计每个阶段的时间
                connectTime: connectEnd - connectStart, //连接时间
                ttfbTime: responseStart - requestStart, //首字节到达时间
                responseTime: responseEnd - responseStart, //响应的读取时间
                parseDOMTime: loadEventStart - domLoading, //DOM解析的时间
                domContentLoadedTime: domContentLoadedEventEnd - domContentLoadedEventStart, //dom解析完成时间(不包括外链解析)
                timeToInteractive: domInteractive - fetchStart, //首次可交互时间
                loadTIme: loadEventStart - fetchStart //完整的加载时间（整个页面加载的时间）
            });


            let FP = performance.getEntriesByName('first-paint')[0];
            let FCP = performance.getEntriesByName('first-contentful-paint')[0];
            //开始发送性能指标
            console.log('FP', FP);
            console.log('FCP', FCP);
            console.log('FMP', FMP);
            console.log('LCP', LCP);
            tracker.send({
                kind: 'experience', //用户体验指标
                type: 'paint', //统计每个阶段的时间
                firstPaint: FP.startTime,
                firstContentfulPaint: FCP.startTime, // 首屏时间
                firstMeaningfulPaint: FMP && FMP.startTime,
                largestContentfulPaint: LCP && LCP.startTime
            });
        }, 3000);
    });

}